<template>
    <div class="container long-container">
        <div class="row">
            <transition name="newsRecommended" appear class="animate__animated"
                enter-active-class="animate__fadeInLeft">
                <div class="col-md-4 long-left">
                    <el-carousel indicator-position="outside">
                        <el-carousel-item v-for="item in productDetail.imgArr" :key="item.id">
                            <img :src="item.imgUrl" :alt="productTitle">
                        </el-carousel-item>
                    </el-carousel>
                    <div class="text">
                        <h3>{{productTitle}}</h3>
                        <!-- <p>库存： {{productDetail.inventory}}</p>
                        <p>销量： {{productDetail.sales}}</p>
                        <p>规格： {{productDetail.specification}}</p>
                        <p>价格： {{productDetail.price}}</p> -->
                    </div>
                </div>
            </transition>
            <transition name="newsRecommended" appear class="animate__animated"
                enter-active-class="animate__fadeInRight">
                <div class="col-md-8 long-right">
                    <div class="title">
                        产品详情
                    </div>
                    <img :src="productDetail.detailImgUrl" :alt="productTitle" style="width: 100%;"
                        v-if="productDetail.detailImgUrl">
                    <el-empty v-else description="暂无信息" />
                </div>
            </transition>
        </div>
    </div>

</template>
<script>
    import { onMounted, computed } from 'vue'
    import { useRoute } from 'vue-router'
    export default {
        name: "ProductDetails",
        setup() {
            const route = useRoute()
            //接收productList传递过来的query参数
            let productTitle = computed(() => route.query.title)
            let productDetail = computed(() => JSON.parse(route.query.detail))
            return {
                productTitle,
                productDetail
            }
        }
    }
</script>
<style lang="css" scoped>
    .long-container {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .long-left {
        border-right: 1px solid #eee;
        margin-bottom: 40px;
    }


    .long-left img {
        width: 100%;
        height: 100%;

    }

    .long-left .text {
        font-family: "Source Han Sans CN";
        line-height: 30px;
        margin-left: 20px;
        margin-top: 30px;
    }

    .long-container .long-left h3 {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .long-container .long-left p {
        font-size: 16px;
        color: #666;
    }



    .long-right .title {
        width: 100%;
        height: 40px;
        background-color: #f1f1f1;
        text-align: center;
        line-height: 40px;
        color: #999;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    /* 设置响应式 */
    /* 移动端 */
    @media (max-width: 768px) {
        .long-right {
            padding-left: auto;
        }
    }

    /* PC端 */
    @media (min-width: 768px) {
        .long-right {
            padding-left: 30px;
        }
    }



    .el-carousel__item:nth-child(2n) {
        background-color: #bacfd8
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3e0e6;
    }
</style>